<template>  
  <view class="reservation-success">  
    <!-- 预约者信息栏 -->  
    <view class="info-section">  
      <text class="title">预约成功通知</text>  
      <view class="info-container">  
        <text class="info-item">姓名：{{ userInfo.name }}</text>  
        <!-- 你可以根据需要添加更多的预约者信息 -->  
      </view>  
    </view>  
  
    <!-- 取消预约按钮 -->  
    <button @click="cancelReservation">取消预约</button>  
  
    <!-- 扫码进入按钮（实际是显示二维码图片） -->  
    <view class="qrcode-section">  
      <text class="qrcode-label">扫码进入：</text>  
      <image class="qrcode" src="https://example.com/path/to/qrcode.png" mode="widthFix"></image>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      userInfo: {  
        name: '张三', // 假设这是从后端API或页面参数获取的  
        // 其他预约者信息...  
      }  
    };  
  },  
  methods: {  
    cancelReservation() {  
      uni.showModal({  
        title: '确认取消',  
        content: '您确定要取消这次预约吗？',  
        success: (res) => {  
          if (res.confirm) {  
            // 调用后端API取消预约  
            console.log('开始调用API取消预约...');  
            // 这里应该有一个API调用，比如使用uni.request()  
            // 假设API调用成功，则提示用户  
            uni.showToast({  
              title: '预约已取消',  
              icon: 'success'  
            });  
            // 根据需要，可能还需要进行页面跳转等操作  
          }  
        }  
      });  
    }  
  }  
};  
</script>  
  
<style>  
/* 添加你的样式 */  
.reservation-success {  
  padding: 20px;  
  text-align: center;  
}  
.info-section {  
  margin-bottom: 20px;  
}  
.title {  
  font-size: 18px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  
.info-container {  
  margin-bottom: 15px;  
}  
.info-item {  
  margin-bottom: 5px;  
}  
.qrcode-section {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  margin-top: 20px;  
}  
.qrcode-label {  
  margin-bottom: 10px;  
}  
.qrcode {  
  width: 200px; /* 根据需要调整大小 */  
}  
</style>